/**
 * 博文详情
 *
 **/
@import "../../../../_public/less/_articleGithub.less";

.blog-detail {
  padding: 70px 0;
  font-size: 1rem;
  background: #dee3e7;
  .blog-detail-container {
    max-width: 1000px;
    margin: auto;
    background: #fff;
  }
  header {
    position: relative;
    padding-top: 44%;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    .header-cover {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #000;
      overflow: hidden;
      canvas {
        width: 100%;
        height: 100%;
        opacity: .8
      }
      &.no-cover {
        background: #1f3747;
        background-image: -webkit-linear-gradient(left, #1f3747 0%, #293d31 100%);
      }
    }
    .header-body {
      position: absolute;
      top: 5em;
      left: 5em;
      .title {
        margin-bottom: .5em;
        line-height: 1.2;
        font-size: 2em;
        font-weight: 500;
        color: #fff;
      }
      .article-info {
        width: 50%;
        margin-bottom: 3em;
        color: #fff;
        opacity: .8;
      }
    }
  }
  .article-section {
    padding: 5em 8em;
    .caption {
      padding: 0 20px;
      h1 {
        margin-bottom: .4em;
        font-size: 1.8rem;
      }
      p {
        font-size: 14px;
      }
    }
    .article {
      background: #fff;
    }
    footer {
      margin: 0 20px;
      padding: 10px 20px;
      background: #f7f8f8;
      p {
        font-size: 14px;
        color: #5c6870;
      }
    }
  }
  .sns-share {
    padding: 6em 0 2em;
    text-align: center;
    a {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin: 0 1em;
      border-radius: 50%;
      font-size: 1.2rem;
      color: #fff;
      background: #fa7d3c;
      background: -webkit-linear-gradient(top, #fa7d3c 0%, #f55f10 100%);
      background: linear-gradient(top bottom, #fa7d3c 0%, #f55f10 100%);
      i {
        display: block;
        padding-top: 10px;
        line-height: 30px;
        font-size: 30px;
      }
      span {
        display: block;
        line-height: 30px;
        font-size: 14px;
      }
      &:hover {
        background: #f4722e;
        background: -webkit-linear-gradient(top, #f4722e 0%, #f05807 100%);
        background: linear-gradient(top bottom, #f4722e 0%, #f05807 100%);
      }
    }
  }
  .comments-section {
    position: relative;
    padding: 2em 8em 4em;
    background: #f5f8fa;
    border: 1px solid #edf0f3;
    &:before {
      position: absolute;
      content: '';
      top: -1rem;
      left: 50%;
      margin-left: -2rem;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent #f5f8fa;
      border-width: 0 2rem 1rem;
    }
  }
}

@media screen and (max-width: 1000px) {
  .blog-detail {
    padding: 0;
    .article-section {
      padding: 1em 0;
    }
    .comments-section {
      padding: 2em 1em;
    }
  }

  .header-body {
    display: none;
  }
}